<template>
	<view class="record flexc">
		<view class="header">
			<view class="">{{data.date}}{{data.contentList.title}}共支出</view>
			<view class="">￥{{data.contentList.price}}</view>
		</view>
		<view class="select-nav">
			<text @click="navNumBtn(0)" :class="data.checkoutType==1 && data.navNum==0 ? 'p1': data.checkoutType==2&& data.navNum==0?'p2':''">按金额</text>
			<text @click="navNumBtn(1)" :class="data.checkoutType==1 && data.navNum==1 ? 'p1': data.checkoutType==2&& data.navNum==1?'p2':''">按时间</text>
		</view>
		<view class="flex1 over-auto">
			<scroll-view scroll-y="true" style="height: 100%;">
				<view class="wrap">
				<view class="box flexr flex-a-c" v-for="(item,index) in data.contentList.list" :key="index">
					<view :class="['iconfont' ,item.icon ,'icon-set',data.checkoutType==1?'ac1':'ac2']"></view>
					<view class="flex1  ">
						<view class="flexr flex-a-c flex-j-b ">
							<view class="">{{item.title}}</view>
							<view class="">{{item.isType==1?'-':'+'}} {{item.price}}</view>
						</view>
						<view class="flexr flex-a-c flex-j-b c-b">
							<view class="">{{item.remark}}</view>
							<view class="">{{item.date}}</view>
						</view>
					</view>
				</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
import { reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
import { useStore } from '../../store';
	const data = reactive({
		checkoutType:1,
		navNum:0,
		totalPrice:0,
		date:'',
		contentList:{}
	})
	const store = useStore()
	onLoad((options)=>{
		data.checkoutType = options.checkType|| 1
		data.totalPrice = options.totalPrice || 0
		data.date = options.date || ''
		const index = options.k || 0
		data.contentList = store.contentList[index]
	})
	const navNumBtn = k=>{
		data.navNum = k
		const action = {
			0: (a,b)=>a.price - b.price,
			1: (a,b)=>a.date - b.date
		}
		data.contentList.list = data.contentList.list.sort(action[data.navNum])
	}
</script>

<style lang="scss">
.record{
	width: 100%;
	height: 100%;
	.header{
		text-align: center;
		padding: 40upx 0;
		font-size: 28upx;
		color: #ccc;
		&>view:nth-child(2){
			margin-top: 20upx;
			font-size: 36upx;
			font-weight: bold;
			color: #000;
		}
	}
	.select-nav{
		padding: 40upx 40upx;
		border-bottom: 1upx solid #eee;
		&>text{
			padding: 10upx 20upx;
			border-radius: 20upx;
			background-color: #eee;
			color: #ccc;
			font-size: 28upx;
		}
		&>text:nth-child(1){
			margin-right: 20upx;
		}
		.p1 {
			color: #3eb575;
			background-color: #ebf7f1;
		}
		.p2 {
			background-color: #fdf8eb;
			color: #f0b73a;
		}
	}
	.wrap{
		padding: 20upx 0;
		.box{
			height: 160upx;
			padding: 0 40upx;
			font-size: 28upx;
			border-bottom: 1upx solid #eee;
			.c-b{
				color: #ccc;
				margin-top: 10upx;
			}
		}
		.box:last-child{
			border-bottom: none;
		}
		.icon-set{
			font-size: 40upx;
			width: 60upx;
			height: 60upx;
			text-align: center;
			line-height: 60upx;
			background-color: red;
			margin-right: 40upx;
			border-radius: 50%;
		}
		.ac1{
			color: #fff;
			background-color: #3eb575;
		}
		.ac2{
			color: #fff;
			background-color: #f0b73a;
		}
	}
}
</style>
